<div class="page-wrapper d-flex flex-column pt-4 w-100">
    <div class="container-xl">
        <div class="page-header d-print-none">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        Listing
                    </div>
                    <h3 class="page-title">
                        {{mixDatabaseTitle}}'s Data List
                    </h3>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body d-flex flex-row-reverse">
        <aside class="bd-sidebar sub-sidebar" ng-init="init()">
            <nav class="bd-links p-3" aria-label="Sub-section navigation">

                <div class="card">
                    <div class="btn-toolbar d-flex card-body" role="group" aria-label="">
                        <div class="btn-group me-2">
                            <button type="button" onclick="window.history.back()" class="btn btn-light me-1">
                                <i class="fa fa-chevron-left"></i>
                            </button>
                        </div>
                        <div class="btn-group flex-fill me-3">
                            <a href="/portal/mix-database-data/create?mixDatabaseId={{mixDatabaseId}}&mixDatabaseName={{mixDatabaseName}}&mixDatabaseTitle={{mixDatabaseTitle}}&dataId=default"
                                class="btn btn-primary ms-auto">
                                <i class="fas fa-plus"></i> Add Data
                            </a>
                        </div>
                        <div class="btn-group me-2">
                            <div class="dropdown float-lg-end ms-auto pe-1">
                                <a href="javascript:;" class="cursor-pointer" id="dropdownTable2"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fa fa-ellipsis-h text-secondary" aria-hidden="true"></i>
                                </a>
                                <ul class="dropdown-menu px-2 py-3 ms-sm-n4 ms-n5" aria-labelledby="dropdownTable2"
                                    style="">
                                    <li>
                                        <a ng-if="isAdmin" href="/portal/mix-database/details/{{mixDatabaseId}}"
                                            class="dropdown-item border-radius-md">
                                            <i class="fas fa-tools"></i> Config MixDB
                                        </a>
                                    </li>
                                    <!-- <li><button type="button" ng-click="$ctrl.clearCache()" ng-if="$ctrl.onClearCache"
                                            class="dropdown-item border-radius-md">
                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                class="icon icon-tabler icon-tabler-refresh" width="20" height="20"
                                                viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
                                                stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
                                                <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
                                            </svg>
                                            <span>Clear Cache</span>
                                        </button>
                                    </li> -->
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- 

                    <div class="btn-group  card-body mb-3 w-100" role="group" aria-label="Basic example">
                        <a href="/portal/mix-database-data/create?mixDatabaseId={{mixDatabaseId}}&mixDatabaseName={{mixDatabaseName}}&mixDatabaseTitle={{mixDatabaseTitle}}&dataId=default"
                            class="btn btn-primary text-white">
                            <i class="fas fa-plus"></i> Data
                        </a>
                        <a ng-if="isAdmin" href="/portal/mix-database/list" class="btn btn-primary text-white">
                            <i class="fas fa-list"></i> List
                        </a>
                        <a ng-if="isAdmin" ng-click="migrate()" class="btn btn-primary text-white">
                            <i class="fas fa-list"></i> Migrate
                        </a>
                        <a ng-if="isAdmin" href="/portal/mix-database/details/{{mixDatabaseId}}"
                            class="btn btn-primary text-white">
                            <i class="fas fa-tools"></i> Config
                        </a>
                    </div> -->

                    <div class="accordion accordion-flush shadow-none" id="accordionFlushExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="flush-headingOne">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#flush-collapseOne" aria-expanded="false"
                                    aria-controls="flush-collapseOne">
                                    Filter by
                                </button>
                            </h2>
                            <div id="flush-collapseOne" class="accordion-collapse collapse"
                                aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body">
                                    <filter-list class="bd-aside-right text-muted align-self-start" key="requestKey"
                                        request="request" callback="getList(pageIndex)"></filter-list>

                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="flush-headingEntities">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#flush-collapseEntities" aria-expanded="false"
                                    aria-controls="flush-collapseEntities">
                                    Entity values
                                </button>
                            </h2>
                            <div id="flush-collapseEntities" class="accordion-collapse collapse"
                                aria-labelledby="flush-headingEntities" data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body overflow-auto" style="max-height: 400px;">
                                    <div ng-if="columns && column.dataType !=='Reference'" ng-repeat="column in columns"
                                        class="">
                                        <label class="form-label">{{column.title}}</label>
                                        <input ng-model="queries[column.name]" ng-enter="getList()"
                                            class="form-control">
                                        <!-- <mix-column-editor model="queries" column="column"></mix-column-editor> -->
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="accordion-item" ng-if="isInRole('SuperAdmin')">
                            <h2 class="accordion-header" id="flush-headingTwo">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#flush-collapseTwo" aria-expanded="false"
                                    aria-controls="flush-collapseTwo">
                                    Export data
                                </button>
                            </h2>
                            <div id="flush-collapseTwo" class="accordion-collapse collapse"
                                aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body">

                                    <a ng-click="export(request.pageIndex, exportAll)"
                                        class="btn btn-sm btn-primary text-white float-end px-4 me-2">
                                        <i class="fas fa-download"></i> Export data
                                    </a>

                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" ng-model="exportAll"
                                            id="export-all">
                                        <label class="form-check-label" for="export-all">Export all</label>
                                    </div>
                                    <!--                     
                        <input type="checkbox" ng-model="exportAll" id="export-all">
                        <label for="export-all">Export All</label> -->
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item" ng-if="isInRole('SuperAdmin')">
                            <h2 class="accordion-header" id="flush-headingThree">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#flush-collapseThree" aria-expanded="false"
                                    aria-controls="flush-collapseThree">
                                    Import data
                                </button>
                            </h2>
                            <div id="flush-collapseThree" class="accordion-collapse collapse"
                                aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body">
                                    <div class="input-group">
                                        <input id="inp-import-data" type="file" name="import-data-inp"
                                            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                                            ngf-select="selectImportFile($files)" data-files="file.files"
                                            class="form-control" aria-label="Upload">
                                        <a ng-class="{'btn-secondary': !importFile.file}" ng-click="import()"
                                            class="btn btn-outline-secondary text-white">
                                            <i class="fas fa-upload"></i> Import</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mb-5"></div>
                </div>
            </nav>
        </aside>
        <!-- ----------------------------------------------------------- -->
        <div class="content-body py-3 pe-3">
            <div class="row">
                <div class="col-12" ng-init="getList()">
                    <div class="mb-5 card">
                        <mix-database-data-values ng-if="columns" on-duplicate="duplicate(data)" on-update="edit(data)"
                            on-delete="remove(data)" columns="columns"
                            can-drag="request.orderBy === 'Priority' && request.direction === 'Asc'"
                            on-send-mail="sendMail(data)" filter-type="request.filterType"
                            compare-type="request.compareType" on-filter-list="getList(0)" on-apply-list="applyList()"
                            selected-list="selectedList" header="''" data="data.items"
                            mix-database-name="mixDatabaseName" mix-database-title="mixDatabaseTitle" queries="queries">
                        </mix-database-data-values>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <em> Total items: <span ng-bind="data.totalItems" class="text-muted"></span></em>
                                </div>
                            </div>
                            <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems"
                                ul-class="pagination justify-content-end m-0" a-class="page-link"
                                paging-action="getList(page-1)" scroll-top="true">
                            </paging>
                        </div>
                    </div>



                </div>
            </div>
        </div>
    </div>
</div>